<template>
    <div class="k-pagenation-box">
        <span>
            每页
        </span>
            <select class="ke-select" :model="pageSize" @change="ChangeSize">
                <option v-for="item in pageSizes"
                    :value="item"
                >{{item}}</option>
            </select>
        <span>
            条
        </span>
        <button class="page-point" v-if="pageNum>show" :disabled="pageIndex<=show"
             @click="ChangeIndex(pageIndex-show)">
            {{ '<<' }}
        </button>
        <button class="page-point" :disabled="pageIndex===1" @click="ChangeIndex(pageIndex-1)">
            {{'<'}}
        </button>

        <ul class="page-list">
            <li v-if="pageNum>show&&pageIndex>show" class="page-point"
                @click="ChangeIndex(pageIndex>pageNum-show?pageNum-show:pageIndex-(show>>>1)-1)"
                >...</li>
            <li 
                v-if="pageNum<=show"
                v-for="item in pageNum"
                :key="item"
                :class="pageIndex==item?'page-point page-checked':'page-point'"
                @click="ChangeIndex(item)"
                >{{item}}
            </li>
            <li 
                v-if="pageNum>show"
                v-for="item in show"
                :key="getKey(item)"
                :class="pageIndex==getKey(item)?'page-point page-checked':'page-point'"
                @click="ChangeIndex(getKey(item))"
                >{{getKey(item)}}
            </li>
            <li v-if="pageNum>show&&pageIndex<pageNum-show" class="page-point"
                @click="ChangeIndex(pageIndex<=show?show+1:pageIndex+(show>>>1)+1)"
                >...</li>
        </ul>
        <button :disabled="pageNum===pageIndex"
          @click="ChangeIndex(pageIndex+1)"
          class="page-point"
          >
            {{'>'}}
        </button>
        <button class="page-point" v-if="pageNum>show" :disabled="pageIndex>pageNum-show" @click="ChangeIndex(pageIndex+show)">
            {{'>>'}}
        </button>
        <span>前往</span>
        <input class="ke-input" style="width: 50px;text-align: center;" @input="input" @keyup.enter="submit" />
        <span>页</span>
        <span>共{{total}}条</span>
    </div>
</template>

<script setup>
import { computed, onMounted, ref } from 'vue'

const props = defineProps({
    pageSizes:{
        type: Array,
        default: ()=>{
            return [10,20,50]
        }
    },
    pageSize:Number,
    // pageNum: Number,
    total: Number,
    pageIndex: Number,
    show: {
        type:Number,
        default: ()=>7,
    }
    // pageSizes: Array,
})
const pageNum = ref(Math.floor(props.total/props.pageSize))
// const show = 7
const defaultPageSizes = [10,20,50]
const emits = defineEmits(["update:pageIndex","update:pageSize","optionchange"])

function ChangeIndex(num) {
    if (num!=props.pageIndex){
        emits("update:pageIndex",num)
        Change(num,props.pageSize)
    }
}
function ChangeSize(e) {
    let nv = e.target.value
    if (nv - props.pageSize !== 0) {
        pageNum.value = Math.floor(props.total/nv)
        ChangeIndex(Math.floor(props.pageIndex*props.pageSize/nv))
        emits("update:pageSize",nv-0)
        // Change(props.pageIndex,nv)
    }
}
function Change(num, size) {
    emits("optionchange",num,size)
}
function input(e) {
    e.target.value=e.target.value.replace(/[^\d]/g,'')
}
function submit(e) {
    let nv = e.target.value-0
    if (nv>0&&pageNum.value>=nv){
        ChangeIndex(nv)
    }
}
function getKey(page) {
    if (props.pageIndex<=props.show){
        return page
    }else if (props.pageIndex>pageNum.value-props.show){
        return pageNum.value - props.show + page
    }
    return props.pageIndex- ((props.show+1)>>>1) + page
}
</script>

<style>
.page-point{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    height: 28px;
    min-width: 28px;
    background-color: #f3f3f3;
    padding: 0 4px;
    border: none;
    transition: all .5s;
    border-radius: 2px;
    cursor: pointer;
    text-align: center;
    box-sizing: border-box;
    margin: 2px;
    user-select: none;
}
.page-point:hover{
    background-color: #3d98ff;
    color: aliceblue;
}
.page-checked{
    background-color: #3d98ff;
    color: aliceblue;
    font-weight: 400;
}
.page-list{
    text-rendering:optimizeLegibility;
    display: flex;
    /* justify-content: space-around; */
}
.k-pagenation-box{
    display: flex;
    align-items: center;
    height: 40px;
    /* overflow-x: auto;
    overflow-y: hidden; */
}
.k-pagenation-box>*{
    margin: 0 5px;
}
</style>